<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
     <!-- 
         computed和watch之间的区别
            1.computed能完成的功能,watch都可以完成
            2.wathch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
         
         两个重要的小原则
            1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
            2.所有不被vue所有管理的函数(定时器的回调函数,ajax的回调函数，promise的回调函数)，最好写成箭头函数
                这样this的指向才是vm 或 组件实例对象
      -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气2</button>
    </div>

    <script>
        Vue.config.productionTip = false
       const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            computed: {
                info () {
                    return this.isHot?'炎热' : '凉爽' 
                }
            },
            methods: {
                changeWeather () {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                isHot (newValue, oldValue) {
                    console.log('isHot被修改了')
                    console.log('新的值:', newValue)
                    console.log('旧的值:', oldValue)
                }
            }
        })
        // vm.$watch('isHot',{
        //     // 正常写法
        //     immediate: true, //(默认false),初始化时让handler调用一下
        //     //handler什么时调用? 当isHot发生改变时调用
        //     handler (newValue, oldValue) {
        //         console.log('isHot被修改了')
        //         console.log('新的值:', newValue)
        //         console.log('旧的值:', oldValue)
        //     },
        // })
        // vm.$watch('isHot', function(){
        //     console.log('isHot被修改了')
        //     console.log('新的值:', newValue)
        //     console.log('旧的值:', oldValue)
        // })

    </script>
</body>
</html>